<template>
    <div>
         <!-- 顶部导航条 -->
        <div class="commom_header" id="globalHeader">
            <div class="header_wrap flex-box">
                <div v-on:click="indexUrl()">
                   <a href="javascript:void(0)">
                      <!-- <icon class="goback_icon" name="left" scale="10"> -->
                      <!-- </icon> -->
                      <i class="iconfont goback_icon">&#xe60c;</i>
                    </a>
                </div>
                <!-- onclick="document.referrer.match(/(wenjun|banggo|mecity|me-city)/g)==null?(window.location.href=indexUrl.href):(history.go(-1))" -->
                <div class="header_text ">{{searchWord[0]}}</div >
                <div class="menus">
                    <i class=" " v-on:click="menuup( )">
                     <!--   <icon v-show="!menuShow" style="display:block" class="bgwap-iconfont menuup" name="menuup" scale="16" >
                       </icon> -->
                       <i v-show="!menuShow"  style="display:block" class="iconfont bgwap-iconfont menuup">&#xe629;</i>
                    </i>
                    <i class=" " v-on:click="menudown()">
                       <!--  <icon v-show="menuShow" style="display:none" class="bgwap-iconfont menudown" name="menudown" scale="16" >
                        </icon> -->
                        <i   v-show="menuShow"  style="display:none"  class="iconfont bgwap-iconfont menudown">&#xe628;</i>
                    </i>
                </div>
            </div>
            <div class="fold_nav foldNav" v-show="menuShow" style="display:none">
                <div class="nav_item wap_index" v-on:click="indexUrl()">
                  <a id="indexUrl" href="javascript:void(0)">
                   首页
                   <icon class=" " name="homePage" scale="10"> </icon>
                  </a>
                </div>
                <div class="nav_item wap_list" v-on:click="categoryUrl()">
                  <a href="javascript:void(0)">
                   商品<icon class=" " name="good_nav" scale="10"> </icon>
                  </a>
                </div>
                <div class="nav_item wap_cart">
                  <a href="javascript:void(0)">
                   购物袋<icon class=" " name="goodsBag" scale="10"> </icon>
                  <label class="shopNum">0</label>
                  </a>
                </div>
                <div class="nav_item wap_user">
                  <a href="javascript:void(0)">
                   我的<icon class=" " name="myIcon" scale="10"> </icon>
                  </a>
                </div>
            </div>
        </div>
        <!-- banner顶部样式 -->
        <div class="wapFloopy-list">
            <div  class="clearfix">
              <span :class="{'itemSelected':selectType===selectType&&selectType!=3}" >
                  <em class="wapFloopy-list-first" style="font-style:normal">综合</em>
                  <i :class="{'itemSelected':selectType===selectType&&selectType!=3}" class="complexDown" v-show="!complexItemUp" style="display:block" v-on:click="onComplexDown($event)">
                 <icon class="arrow_down" name="arrow_down" scale="10" style="margin-left:30px"> </icon>
                  </i>
                  <i :class="{'itemSelected':selectType===selectType&&selectType!=3}" class="complexUp " v-show="complexItemUp" style="display:none" v-on:click="onComplexUp()" >
                      <icon class="arrow_up" name="arrow_up" scale="10"> </icon>
                  </i>
              </span>
              <span v-on:click= "price(3)">
                  价格
                      <i><icon :class="{'arrow_up_pricer':true,'itemSelected':isFalse}" class="arrow_up" name="arrow_up" scale="10"> </icon></i>

                      <i><icon  :class="{'arrow_down_pricer':true,'itemSelected':haveFalse}"  class="arrow_down" name="arrow_down" scale="10"></icon></i>
                      
              </span>
              <span :class="{'itemSelected':isTrue}" v-on:click="sctockSwitch($event)">有货</span>
              <span v-on:click='onFilter()'>筛选</span>
              <span class="menus"> 
                  <i v-on:click="goodsmenu1()">
                     <icon v-show="!goodsShow" style="display:block" class="arrow_goods" name="goods" scale="10">
                      </icon>
                  </i> 
                  <i v-on:click="goodsmenu2()">
                     <icon v-show="goodsShow" style="display:none" class="arrow_goods menu-good" name="menu-good" scale="10"   >
                     </icon >
                  </i>
              </span>
            </div>
            <div v-on:click="complexItem($event)"class="complexItem" v-show="complexItemUp" style="display:none">
                  <ul>
                    <li v-on:click="onComplexUp(),select(2,$event)" sortname="a" sortvalue="a" class=" sortname" :class="{'itemSelected':selectType===2}">综合排序</li>
                    <li v-on:click="onComplexUp(),select(0,$event)" sortname="3" sortvalue="-1" class=" sortname" :class="{'itemSelected':selectType===0}">新品优先</li>
                    <li v-on:click="onComplexUp(),select(1,$event)" sortname="2" sortvalue="-1" class=" sortname" :class="{'itemSelected':selectType===1}">销量从高到低</li>
                  <!-- <li>评论数从高到低</li> -->
                  </ul>
            </div>
        </div>
    </div>
</template>
<style>
@import './../css/searchNav.css';
</style>
<script>
var config = window.config;
var selectType =2;
var isFalse = false;
var haveFalse = false;
import {
    TransferDom,
    Popup,
    Group,
    XSwitch,
    XImg
} from 'vux';
export default {
    name: 'searchNav',
    components: {
      TransferDom,
      Popup,
      Group,
      XSwitch,
      XImg
    },
     directives: {
        TransferDom
    },
    data() {
        return {
          goodsShow:false,
          menuShow:false,
          show11:false,
          complexItemUp:false,
          isTrue:false,
          isFalse:false,
          haveFalse:false,
          selectType:2,
          searchWord:[]
        }
    },
    mounted() {
        this.pricer(true);
        this.jumpSearch();
    },
    methods: {
      jumpSearch(){
       // 正则获取 word 参数;
       // var word = (new RegExp('[?|&]'+'word'+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20')||'商品列表';
       // 
       
       //根据路由获取url word
            var searchWord = []
            searchWord.push(this.$route.query['word']==""?'商品列表':this.$route.query['word']);
            this.searchWord = searchWord;
            // console.log(this.searchWord)
            // console.log(this.$route);
       // 未优化 完全 
            
            //获取url中"="符前的字串
            // var url = window.location.href; 
            //  var theRequest = [];
            //  if (url.indexOf("=") != -1) {
            //     var str = url.substr(0);
            //     var strs  = str.split("&");
            //     for(var i = 0; i < strs.length; i ++) {
            //        theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            //     }
            //  }
            // var searchWord =window.location.href
            // var reg = new RegExp("(^|&)"+ 'searchWord' +"=([^&]*)(&|$)");
            // console.log(reg)
            // var r = window.location.search.substr(1).match(reg);
            //  console.log(r)
            //  var searchWord =window.location.href.substr(0,)
        },
        //跳转首首页
        indexUrl(){
            this.$router.push({
              name:'',//具体不知其存在的意义;
              path:' ',//跳转的路径; 一个空格类似于 a标签的空链; 绝对路劲解析直接作用于 根目录下;
              query:{

              }
            })
        },
        //跳转至商品分类
        categoryUrl(){
            // 添加地址栏后面参数
            // console.log(this.$router);
            // console.log(this.$router.query);          
                this.$router.push({
                    name:'',//不知其含义的作用;
                    path:'./category',
                    query:{
                         // data:"aa" 
                    }
                })
        },
      // 筛选弹层
       onFilter() {
            // emit 触发父元素的函数
            this.$emit("componentCon");
        },
        //导航栏的显示;
        menuup(){
          this.menuShow=!this.menuShow;
           document.querySelector('.wapFloopy-list').style.top='3.2rem'
        },
        menudown(){
           this.menuShow=!this.menuShow;
           document.querySelector('.wapFloopy-list').style.top='1.6rem';
           // document.querySelector('.fold_nav').style.display='none';
        },
        goodsmenu1(){
          this.goodsShow=!this.goodsShow;
        },
        goodsmenu2(){
          this.goodsShow=!this.goodsShow;
        },
       // 综合功能显示 
        onComplexDown(event) {
          // var code=String(event.target.getAttribute("name"));
          // console.log(code);
          this.complexItemUp=!this.complexItemUp;
          var code=document.querySelector('.arrow_down').innerHTML;
          document.querySelector('.wapFloopy-list').style.background  = "#fff";
          // this.show11 = !this.show11; 这是模板引入没有实现
        },
         //综合功能隐藏
        onComplexUp(){
          this.complexItemUp=!this.complexItemUp;
          document.querySelector('.wapFloopy-list').style.background  = "#f7f7f7";
        }, 
        //综合功能 分类选中
        complexItem(event){
          document.querySelector('.wapFloopy-list-first').innerHTML=String(event.target.innerHTML).substr(0,2);
          // event.target.className='red';
          // 获取当前元素的自定义属性值
          // console.log(event.target.getAttribute("sortname")) 
          // console.log(event.target.getAttribute("sortvalue")) 
          this.isFalse=false;
          var code=String(event.target.getAttribute("sortname"));
          var param=String(event.target.getAttribute("sortvalue"));
          var searchParam = {};
              searchParam[code] = param;

           if(code=='a'&&param=='a'){
                  // 请求发送成功了 未完成的功能??????;
                this.$http.get('index.php/search/get-search-goods/a_a_a_a_a_a_a_a_a_a_a_a.shtml').then(response=>{
                     var  lists = response.data.data.list;
                     this.lists = lists;
                     
                }, response => {
                    // error callback
                    // this.isShow = false
                }) 
           }else if(code=='3'&&param=='-1'){
               // 请求发送成功了 未完成的功能??????;
                this.$http.get('index.php/search/get-search-goods/a_a_a_a_a_a_a_3_-1_a_a_a.shtml').then(response=>{
                     var  lists = response.data.data.list;
                     this.lists = lists;
                    
                }, response => {
                    // error callback
                    // this.isShow = false
                }) 
           }else if(code=='2'&&param=='-1'){
                 // 请求发送成功了 未完成的功能??????;
                this.$http.get('index.php/search/get-search-goods/a_a_a_a_a_a_a_2_-1_a_a_a.shtml').then(response=>{
                     var  lists = response.data.data.list;
                     this.lists = lists;
                     
                }, response => {
                    // error callback
                    // this.isShow = false
                }) 
           }
           
        },
        // 综合功能 选中
        select(type, event) {
        // if (!event._constructed){
        //   return;
        // }
        this.selectType = type;
        this.isFalse=false;
        this.haveFalse=false;
        // this.$dispatch('ratingtype.select', type);
        },
        
        // 价格
        price(type){
             this.selectType=type;   
             // console.log(this.selectType)
             this.isFalse=!this.isFalse;
             this.haveFalse=!this.isFalse;
             if(this.isFalse == true){
                 // 请求发送成功了 未完成的功能??????;
                this.$http.get('index.php/search/get-search-goods/a_a_a_a_a_a_a_1_1_a_a_a.shtml').then(response=>{
                     var  lists = response.data.data.list;
                     this.lists = lists;
                }, response => {
                    // error callback
                    // this.isShow = false
                }) 
             }else if(this.haveFalse==true){
                 // 请求发送成功了 未完成的功能??????;
                this.$http.get('index.php/search/get-search-goods/a_a_a_a_a_a_a_1_-1_a_a_a.shtml').then(response=>{
                     var  lists = response.data.data.list;
                     this.lists = lists;
                }, response => {
                    // error callback
                    // this.isShow = false
                }) 
             }

        },
        pricer(){
             // document.querySelector('.arrow_up_pricer').style.color='#000';
        },
        //有货
        sctockSwitch(event){
          this.isTrue=!this.isTrue;
          // var =false;
          // this.= !this.;
        }
    },
    activated(){
        
    }

}
</script>
